/*
 * @Author: ZARR 
 * @Date: 2018-03-30 10:10:07 
 * @Last Modified by: ZARR
 * @Last Modified time: 2018-04-20 16:49:29
 * @作用:HeaderBar组件用来让客户更好的寻找产品相关的参数和配置
 * @传入参数:barData对象,包含相关信息 
 */

<template>
  <div id="headerBar" :class="{'beFixed': scrolling}">
     <div class="container">
     	<p class="title">{{barData.barTitle}}</p>
     	<i class="iconfont icon-xiangxiajiantou minScreen" :class="{'beClicked' : beClick}" @click="click" v-if="barData.items.length !== 0"></i>
     	<div class="others">
     		<div class="left" :class="{'open' : beClick}">
     			<a :href="item.url" v-for="(item, index) in barData.items" :key="index">{{item.content}}</a>
     		</div>
     		<a :href="barData.buyUrl">购买</a>
     	</div>
     </div>
  </div>
</template>

<script>
export default {
    data(){
    	return {
            beClick:false, 
            topToScreen:0,
            scrolling: false
    	}
    },
    methods:{
    	click(){ //移动端点击控制菜单下拉
    		this.beClick = !this.beClick;
    	}
    },
    props:{
    	barData:{
           required:true,
           type:Object
    	},
		offsetTopNow:{
           required:true,
           type:Number
        },
    },
    watch:{  //控制titleBar是否在屏幕最顶端
    	offsetTopNow(newValue){ 
    		if(newValue > 0)
            this.scrolling = true;
            else
            this.scrolling = false;
			//console.log(newValue);
    	}
    }
}
</script>

<style lang="stylus" scope>
#headerBar
	width 100%
	height 60px
	background #fff
	top 60px
	transition all .3s
	z-index 0
	.container
		display flex
		justify-content space-between
		color #707473
		line-height 60px
		.others
			display flex
			>a
				display block
				color #fff
				background #f26444
				height 30px
				line-height 30px
				padding 2px 18px
				position relative
				top 13px
				border-radius 6px
				font-size 14px
			.left
				a
					line-height 60px
					color #707473
					font-size 14px
					font-weight 300
					margin-right 50px
					&:hover
						color #f26444
		.title
			font-weight 300
			font-size 18px
		.iconfont
			font-size 12px
			transition all .4s
	a:hover
		color #f26444
.beFixed
	position fixed
	z-index 100!important
	top 0px!important
@media (max-width: 600px)
	#headerBar
		.container
			position relative
			.others
				.left
					position absolute
					left 0px
					top 60px
					width 100%
					padding 0 15px
					box-sizing border-box
					background #1f2025
					overflow hidden
					max-height 0px
					transition all .4s
					a
						display block
						line-height 60px
						border-bottom 1px solid rgba(255,255,255,.2)
						margin 0px
						color #fff
						font-size 16px
				>a
					font-size 13px
				.open
					max-height 1000px
			.title
				font-size 13px
			.beClicked
				transform rotate(180deg)
</style>
